<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8"
            @submit.prevent="initEcharts()">
          <div class="form-group">
            <vue-area-4
                areaId="areaId"
                areaName="areaName"
                :areaIdVal="staff.dto().areaId"
                :areaNameVal="staff.dto().areaName"
                :areaFixed="staff.dto().areaId"
                :selectBy="staff.dto().areaId"
            ></vue-area-4>
          </div>
          <div class="form-group">
            <label class="font-noraml">排名对比</label>
            <div class="input-group">
              <input autocomplete="off" type="number" placeholder="点击输入起始年份" class="input-sm form-control yearpicker"
                  name="startYear" id="startYear"/>
              <span class="input-group-addon">到</span>
              <input autocomplete="off" type="number" placeholder="点击输入截止年份" class="input-sm form-control yearpicker"
                  name="endYear" id="endYear"/>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-sm btn-primary">搜索</button>
            <button type="reset" class="btn btn-sm btn-dafault">重置</button>
          </div>
        </form>
      </div>
    </div>
    <div class="col-md-12">
      <div class="echarts" id="echarts-bar-chart"></div>
    </div>
  </div>
</template>
<style>
.echarts {
  height: 540px;
}
</style>
<script type="text/javascript">
import '@/assets/css/style.css'
import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import '@/assets/js/pageTag'
import echarts from 'echarts'
import vueArea4 from '@/components/vue-area-4'
import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'
import axios from 'axios'
import {axiosContentType, site} from '@/assets/js/boss'
import Swal from 'sweetalert2'

var barChart;
var baroption;
export default {
  data() {
    return {}
  },
  components: {
    'vue-area-4': vueArea4, echarts
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    that.staff.init(function () {
      that.initEcharts();
    });
    laydate.render({
          elem: '#startYear',
          type: 'year',
          showBottom: false,
          change: function (value, date, endDate) {
            $('#startYear').val(value);
            if ($('.layui-laydate').length) {
              $('.layui-laydate').remove();
            }
          }
        }
    );
    laydate.render({
          elem: '#endYear',
          type: 'year',
          showBottom: false,
          change: function (value, date, endDate) {
            $('#endYear').val(value);
            if ($('.layui-laydate').length) {
              $('.layui-laydate').remove();
            }
          }
        }
    );
  },
  methods: {
    initEcharts() {
      // 初始化柱状图
      barChart = echarts.init(document.getElementById('echarts-bar-chart'));
      let startYear = $('#startYear').val();
      let endYear = $('#endYear').val();
      if (startYear === '' && endYear !== '') {
        Swal.fire('起始年份不可为空');
        return;
      } else if (endYear === '' && startYear !== '') {
        Swal.fire('结束年份不可为空');
        return;
      } else if (startYear !== '' && endYear !== '' && startYear > endYear) {
        Swal.fire('起始年份不能大于结束年份');
        return;
      }
      // 获取数据
      axios.post(site.analysis.examineRanking.rankStat
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          // console.log(JSON.stringify(result));
          let seriesArray = [];
          let years = [];
          let values = [];
          for (let i in result.data) {
            let data = result.data[i];
            // 获取排名年份
            if (i === '0' && data.details.length > 0) {
              years.push('product');
              for (let j in data.details) {
                years.push('' + data.details[j].year);
                seriesArray.push({type: 'bar'});
              }
              values.push(years);
            }
            // 组装排名值
            if (data.details) {
              let value = [];
              value.push(data.name);
              for (let j in data.details) {
                value.push(data.details[j].rank);
              }
              values.push(value);
            }
          }
          // console.log(values);
          let titleText = (startYear === endYear) ? '上年度排名' : startYear + '-' + endYear + '排名变化';
          // 考核排名统计
          baroption = {
            title: {
              text: titleText
            },
            legend: {},
            tooltip: {},
            dataset: {
              source: values
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: seriesArray
          };
          barChart.setOption(baroption);
        } else {
          Swal.fire(result.message);
        }
      });
      $(window).resize(barChart.resize);
    }
  }
}
</script>
